import { FIELD_TYPES } from '@/constants/enums';
import moment from 'moment';
import { Card, InputNumber } from 'antd'
import {
  FormItem, Input, ArrayTable, Editable, Select, Checkbox, Switch,
  FormLayout, FormGrid
} from '@formily/antd'
import { createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
  components: {
    FormItem,
    Editable,
    Input,
    ArrayTable,
    Select,
    Checkbox,
    Switch,
    FormLayout,
    Card,
    FormGrid,
    InputNumber
  },
})
export const renderFormFields = (fields = []) => {
  return (
    <SchemaField>
      {
        fields.map(field => {
          switch (field.type) {
            case FIELD_TYPES.datetime:
              return (
                <SchemaField.String
                  name={field.name}
                  title={field.title}
                  x-decorator="FormItem"
                  required
                  x-component="DatePicker"
                  x-component-props={{ showTime: true }}
                />
              )
            case FIELD_TYPES.switch:
              return (
                <SchemaField.String
                  name={field.name}
                  title={field.title}
                  x-decorator="FormItem"
                  required
                  x-component="Switch"
                />
              )
            case FIELD_TYPES.number:
              return (
                <SchemaField.String
                  name={field.name}
                  title={field.title}
                  x-decorator="FormItem"
                  required
                  x-component="InputNumber"
                />
              );
            case FIELD_TYPES.select:
              return (
                <SchemaField.String
                  name={field.name}
                  title={field.title}
                  x-decorator="FormItem"
                  required
                  x-component="Select"
                  enum={field.data.map(item => ({ ...item, label: item.title }))}
                />
              );
            default:
              return (
                <SchemaField.String
                  name={field.name}
                  title={field.title}
                  x-decorator="FormItem"
                  required
                  x-component="Input"
                />
              )
          }
        })
      }
    </SchemaField>
  )
}

export const renderSearchFields = (fields = []) => {
  return (
    <SchemaField>
      <SchemaField.Void
        x-component="FormGrid"
        x-component-props={{
          maxColumns: 4,
          minColumns: 2,
        }}
      >
        {
          fields.map(field => {
            switch (field.type) {
              case 'number':
                return (
                  <SchemaField.String
                    name={field.name}
                    title={field.title}
                    x-decorator="FormItem"
                    x-component="InputNumber"
                  />
                )
              case 'datetime':
                return (
                  <SchemaField.String
                    name={field.name}
                    title={field.title}
                    x-decorator="FormItem"
                    x-decorator-props={{ gridSpan: 2 }}
                    x-component="DatePicker.RangePicker"
                    x-component-props={{
                      showTime: true, ranges: {
                        '今天': [moment().startOf('day'), moment()],
                        '本月': [moment().startOf('month'), moment().endOf('month')],
                        '上周': [moment().subtract(7, 'days'), moment()],
                        '上月': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')]
                      }
                    }}
                  />
                )
              default:
                return (
                  <SchemaField.String
                    name={field.name}
                    title={field.title}
                    x-decorator="FormItem"
                    x-component="Input"
                  />
                )
            }
          })
        }
      </SchemaField.Void>
    </SchemaField>
  )
}